<template>
  <div class="cart-container">
    <!-- 头部 -->
    <div class="cart-header">
      <div>
        购物车<span>({{ cartData.length }})</span>
      </div>
      <div class="delete" @touchend="deleteCartGoods">删除</div>
    </div>
    <!-- 商品列表 -->
    <div class="cart-list">
      <van-checkbox-group v-model="checked" ref="checkboxGroup">
        <div class="card-item van-hairline--bottom" v-for="item in cartData" :key="item.id">
          <van-checkbox class="item-checkd" :name="item.id"></van-checkbox>
          <CartCard :cartData="item" :num="numList[item.id]" @renovate="renovate" />
        </div>
      </van-checkbox-group>
    </div>
    <!-- 下方导航 -->
    <van-submit-bar :price="allMoney" button-text="提交订单" @submit="onSubmit" class="cart-bar">
      <van-checkbox v-model="checkedAll" @click="changeCheckdAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import CartCard from "@/components/CartCard.vue";
import { mapState } from "vuex";
import api from "@/api";
import { Dialog } from "vant";
export default {
  components: { CartCard },
  mounted() {
    this.getData();
  },
  data() {
    return {
      checked: [],
      cartData: [],
      checkedAll: false,
      show: true,
    };
  },
  watch: {
    checked() {
      if (this.checked.length === this.cartData.length) {
        this.checkedAll = true;
      } else {
        this.checkedAll = false;
      }
    },
  },
  computed: {
    ...mapState(["numList"]),
    //商品价格总数
    allMoney() {
      const resultArr = this.cartData.filter((item) => this.checked.includes(item.id));
      return resultArr.reduce((prev, next) => {
        const counter = this.numList[next.id] || 0;
        return Math.round(counter * next.price * 100) + prev;
      }, 0);
    },
  },
  methods: {
    //获取购物车商品
    async getData() {
      this.$store.commit("setLoading", true);
      const result = Object.keys(this.numList);
      this.cartData = await api.getCartList(result);
    },
    //点击全选选中
    changeCheckdAll() {
      if (this.checkedAll) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
    },
    //购物车有商品数量已空，重新获取购物车数据
    renovate() {
      this.getData();
    },
    //删除购物车商品
    async deleteCartGoods() {
      if (this.checked.length === 0) {
        this.$toast({
          message: "请选中需要删除的商品",
        });
        return;
      }

      await this.$dialog
        .confirm({
          title: "删除商品",
          message: "是否确定删除所选商品？",
        })
        .then(() => {
          this.checked.forEach((id) => {
            this.$store.commit("localNumList", { id, num: -Infinity });
            this.cartData = this.cartData.filter((item) => !this.checked.includes(item.id));
          });
        })
        .catch(() => {
          this.$toast({
            message: "已取消",
          });
        });
    },
    //提交订单
    onSubmit() {
      this.$toast(`提交订单,消费${this.allMoney / 100}`);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/css/CartView.scss";
</style>
